import React, { FC, useEffect } from 'react'
import { Layout, Menu } from 'antd';
import logo from '@/assets/logo.png'
import type { MenuProps } from 'antd';
import {
    AppstoreOutlined,
    ContainerOutlined,
    DesktopOutlined,
    MailOutlined,
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    PieChartOutlined,
} from '@ant-design/icons';
import { useReduxStore } from '@/redux/store';
import { routerList } from './../../utils/routerList';
import _ from 'lodash'
import { history, useLocation } from 'umi';
import { useMobxStore } from '@/mobx/store';
import { observer } from 'mobx-react';

type MenuItem = Required<MenuProps>['items'][number];
const { Header, Footer, Sider, Content } = Layout;
function getItem(
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
    type?: 'group',
): MenuItem {
    return {
        key,
        icon,
        children,
        label,
        type,
    } as MenuItem;
}
const MyMenu: FC<any> = () => {
    const { MyData: {
        userInfo
    } } = useMobxStore()
    const { state } = useReduxStore()
    const { pathname } = useLocation()


    const getMenuItems = (list: MenuItem[], items?: MenuItem[]): MenuItem[] => {
        items = items || []
        const role: any = userInfo.get('role')
        _.forEach(list, (item: any, index: any) => {
            if (item.routes) {
                if (item.max) {
                    if (role >= item.role && role <= item.max) {
                        let subItems: any = getMenuItems(item.routes)
                        !item.noShow && items?.push(getItem(item.text, item.path, item.icon, subItems))
                    }
                } else {
                    if (role >= item.role) {
                        let subItems: any = getMenuItems(item.routes)
                        !item.noShow && items?.push(getItem(item.text, item.path, item.icon, subItems))
                    }
                }

            } else {
                if (item.max) {
                    if (role >= item.role && role <= item.max) {
                        !item.noShow && items?.push(getItem(item.text, item.path, item.icon))
                    }
                } else {
                    if (role >= item.role) {
                        !item.noShow && items?.push(getItem(item.text, item.path, item.icon))
                    }
                }

            }
        })
        return items;
    }



    useEffect(() => {

    }, [])


    return (
        <Sider
            collapsed={state.get('collapsed')}
            style={{ height: '100vh', overflow: 'auto' }}
        >
            <div className='logo' style={{ width: '100%', padding: '20px 20px' }}>
                <img src={logo} alt="" style={{ width: '100%' }} />
            </div>

            <Menu
                defaultSelectedKeys={[pathname]}
                defaultOpenKeys={[pathname.split('/').slice(0, 3).join('/')]}
                selectedKeys={[pathname]}
                mode="inline"
                theme="dark"

                items={getMenuItems(routerList)}
                onClick={(item: any, node: any) => { history.push(item.key) }}
            />
        </Sider>
    )
}




export default observer(MyMenu)